<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >
    <el-form-item label="所属仓库" class="inputs">
         <el-select v-model="warehouseId" placeholder="请选择" style="width: 160px;" @change="getChange(warehouseId)">
              <el-option
                v-for="item in warehouseDate"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
      </el-form-item>

      <el-form-item>
        
        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <div style="text-align: left">
          <el-button
            type="primary"
            @click="btnAdd"
            :loading="exportLoading"
            v-hasPermi="['system:tenant:export']"
          >
            新增
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="dataList"
      border
      show-summary
      :summary-method="getSummaries"
      :summary-props="{ columns: ['quantity', 'unitPriceExcludingTax', 'unitPriceIncludingTax'] }"
      style="width: 100%"
    >
      
      <el-table-column label="区域编码" align="center" prop="id" />
      <el-table-column label="区域名称" align="center" prop="name" />
      <el-table-column label="分类状态" align="center" prop="areaStatus" />
      <el-table-column label="位置" align="center" prop="code" />
      <el-table-column label="区域位置描述" align="center" prop="locationDescription" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
          编辑
        </el-button>
        <el-button link type="danger" size="small" @click="btnDetail(scope.row)">
          删除
        </el-button>
      </template>

    </el-table-column>
      
    </el-table>
<!-- 分页 -->
<div class="footer-area">
        <el-pagination
      v-model:pageNo="queryParams.pageNo"
      v-model:pageSize="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
  </ContentWrap>

  <!-- 自定义字段 -->
  <el-dialog v-model="dialogVisible" title="自定义字段" width="50%" :before-close="handleClose">
    <div class="content">
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.image" label="图片" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.bianhao" label="产品编号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.name" label="产品名称" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.count" label="产品分类" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.feilei" label="产品规格" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.shuxing" label="产品属性" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu" label="产品备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.zhuangtai" label="产品使用状态" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei" label="单位(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu2" label="入库备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei2" label="销售单价(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei3" label="成本单价(基本单位)" size="large"
      /></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  
   <!-- 新增弹框 -->
  <docking v-model="dockShow" @confirm="btnconfirm" :ids="ids" />
</template>
<script lang="ts" setup>
import docking from './components/add.vue'
import { warehouseAreaApi } from '@/api/erp/foundation/warehouseArea'
import { warehouseApi } from '@/api/erp/foundation/warehouse'
import { h } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import download from '@/utils/download'
import type { TableColumnCtx } from 'element-plus'
import type { VNode } from 'vue'
const dockShow = ref(false)
const list = ref([]) // 列表的数据
const warehouseDate = ref([])
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const isExpanded = ref(false)

const dialogVisible = ref(false)
// const tempVisibleColumns = ref({ ...visibleColumns.value })
const searchConfig = ref([
  {
    prop: 'shipmentNumber',
    placeholder: '请输入入库编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialKey',
    placeholder: '请选择单据类型',
    type: 'select',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入规格',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入型号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入关联单号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入建议供应商',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入仓库',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入销售订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入客户订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '制单开始日期',
    endPlaceholder: '制单结束日期',
    showInCollapsed: false
  }
])
const dataList=ref([])
const name=ref("")
const options=ref([])
const pageNo=ref(1)
const pageSize=ref(10)
const ids=ref("")
const warehouseId=ref("")
//删除
function btnDetail(e){
  console.log('这是什么',e.id)
  ids.value=e.id
  ElMessageBox.confirm(
    '确实是否删除该数据',
    
    {
      confirmButtonText: 'OK',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
   
      warehouseAreaApi.delete(ids.value).then((res)=>{
        console.log('这是啥',res)
        if(res == true){
          getpageList()
          ElMessage({
        type: 'success',
        message: '操作成功',
      })
        }
      })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
/** 初始化 **/
onMounted(async () => {
  getpageListss()
})
//新增刷新列表
function btnconfirm() {
  getpageList()
}
function getChange(e) {
  console.log('这是啥',e)
  queryParams.warehouseId=e
  getpageList()
}
//获取仓库数据
function getpageListss() {
  let parm = {
    pageNo: 99,
    pageSize: 10
  }
  warehouseApi.pageList().then((res) => {
    warehouseDate.value = res.list
  })
}
//分页
function  handleSizeChange(e){
  pageSize.value=e
  getpageList()
}
function handleCurrentChange(e){
  pageNo.value=e
  getpageList()
}
//列表接口
function getpageList() {
  let parm = {
    name: name.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    warehouseId: queryParams.warehouseId
  }
  warehouseAreaApi.pageList(parm).then((res)=>{
    console.log('列表的数据',res)
      dataList.value=res.list
      total.value=res.total
      for(let item of dataList.value){
        if(item.areaStatus =='0'){
           item.areaStatus='启用'
        }else{
          item.areaStatus='禁用'
        }
      }
  })
}
//打开新增弹框
function btnAdd(){
   ids.value=''
  dockShow.value=true
}
//编辑
function handleClick(e){
  ids.value=e.id
  dockShow.value=true
}

const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}

// 根据展开状态过滤显示的搜索项
const visibleSearchConfig = computed(() => {
  return searchConfig.value.filter((item) => isExpanded.value || item.showInCollapsed)
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  warehouseId: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}


/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
  detailRef.value.open(id)
}
</script>
<style scoped>
.footer-area{
  display: flex;
    padding-bottom: 14px;
    margin-top: 26px;
    justify-content: end;
  
}

:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}

.expand-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #909399;
}

/* 使表单行间距更合理 */
.el-form-item {
  margin-bottom: 10px;
}

.order-font {
  padding: 2px 0;
  font-size: 12px;
}
</style>
